<template>
	<el-dialog
		:visible.sync="evalDialog"
		width="800px"
		class="evalDialog">
		<h3 class="title"><span></span>测评</h3>
		<div class="eval">
			<ul class="msg">
				<li class="msg-name">
					<span>姓名：</span>{{options.userinfo.userName}}
				</li>
				<li class="msg-name">
					<span>手机号：</span>{{options.userinfo.phone}}
				</li>
				<li class="msg-name" v-show="intentionJob">
					<span>工作岗位意向：</span>{{intentionJob}}
				</li>
			</ul>
			<div class="stepone" v-if="showOne">
				<el-radio-group v-model="form.radio" class="stepone-radio">
					<template v-for="(radio,index) in options.radioList">
						<el-radio :key="radio.label" :label="radio.label" border size="medium">{{radio.jobName}}</el-radio>
					</template>
				</el-radio-group>
				<div class="sure">
					<el-button type="primary" @click="switchjob" class="sure-btn">确定</el-button>
				</div>
			</div>
			<div class="steptwo" v-else>
				<h3 class="skill-test">技能测评</h3>
				<ul class="skill-switch">
					<template v-for="(skill,index) in skillList">
						<li class="switch-item" :key='skill.id'>
							<span class="skill-title">{{index+1}}.{{skill.name}}</span>
							<el-radio-group v-model="skill.grade" :key="skill.id">
							    <el-radio v-for="item in skill.items" :label="item.label" :key="item.id">{{item.name}}</el-radio>
							</el-radio-group>
						</li>
					</template>
				</ul>
				<h3 class="skill-test">星级评定</h3>
				<el-rate v-model="form.rate" :max="10" class="skill-rate"></el-rate>
				<h3 class="skill-test">工作照片</h3>
				<div class="skill-rate">
					<el-upload
					  action="https://fcw.fcw-china.com:8443/electronic/contract/UploadPic"
					  list-type="picture-card" 
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload"
					  :data={dialogImageUrl} :file-list="form.workPhotos"
					  :on-remove="handleRemove" :limit="9">
					  <i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
					  <img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</div>
				<h3 class="skill-test">证书照片</h3>
				<div class="skill-rate">
					<el-upload
					  action="https://fcw.fcw-china.com:8443/electronic/contract/UploadPic"
					  list-type="picture-card"
					  :on-success="handleWorkPhotosSuccess"
					  :before-upload="beforeAvatarUpload"
					  :data={dialogImageUrl} :file-list="form.certificatePhotos"
					  :on-remove="handleWorkPhotosRemove" :limit="9"
					>
					  <i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
					  <img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</div>
				<h3 class="skill-test">参考薪资</h3>
				<div class="skill-rate">
					<el-select v-model="money" placeholder="请选择">
						<el-option
						  v-for="item in moneyList"
						  :key="item.value"
						  :label="item.label"
						  :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="skill-submit">
					<el-button type="danger" size="small" @click="submitForm" style="width: 150px;">确定</el-button>
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import jobsJson from '../../assets/jobs.json';
export default{
	props:{
		options:{
			type: Object,
			require: true
		},
		intentionJob:{
			type:String
		}
	},
	data(){
		return {
			evalDialog:false,
			form:{
				radio: 1,
				skillList:[],
				rate:0,
				certificatePhotos:[],
				workPhotos:[],
				referPayLow:'',					//薪资下限
				referPayHign:''					//薪资上线
			},
			skillList:[],
			showOne: true,
			dialogImageUrl: '',
			dialogVisible: false,
			moneyList:[],
			money:''
		}
	},
	created(){
		this.moneyList = jobsJson.moneyList;
	},
	methods:{
		open(){
			this.evalDialog = true;
		},
		close(){
			this.showOne = true;
			this.evalDialog = false;
		},
		switchjob(){
			let jobName = this.options.radioList[this.form.radio-1].jobName;
			this.$emit('update:intentionJob',jobName);
			this.$houseAxios.post('/housekeeping/OfflineAppraisal/selectAppraisalRegidSoft',{appraisalType:this.form.radio}).then(res => {
				console.log(res);
				if(res.data.code === 1000){
					this.skillList = res.data.data;
					this.skillList.forEach(item => {
						item.items = [
							{name:'一般',label:1,id:1},
							{name:'良好',label:2,id:2},
							{name:'优秀',label:3,id:3}
						];
						// item.grade = 1;
					})
				}
			})
			this.showOne = false;
		},
		//删除上传的工作照片图片地址，并删除要提交给后台的那个图片的地址
		handleRemove(file, fileList) {
			let index = this.form.workPhotos.findIndex((value,index,arr) => {
				return value.uid == file.uid;
			});
			this.form.workPhotos.splice(index,1);
		},
		//删除上传的证书照片图片地址，并删除要提交给后台的那个图片的地址
		handleWorkPhotosRemove(file, fileList) {
			let index = this.form.certificatePhotos.findIndex((value,index,arr) => {
				return value.uid == file.uid;
			});
			this.form.certificatePhotos.splice(index,1);
		},
		//成功上传工作照片到服务器返回的线上图片路径
		handleAvatarSuccess(res, file) {
			this.dialogImageUrl = res.data;
			this.form.workPhotos.push({
				url:res.data,
				uid:file.uid
			});
		},
		//成功上传证书照片到服务器返回的线上图片路径
		handleWorkPhotosSuccess(res, file){
			this.dialogImageUrl = res.data;
			this.form.certificatePhotos.push({
				url:res.data,
				uid:file.uid
			});
		},
		//上传图片之前限制图片大小
		beforeAvatarUpload(file) {
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			return isLt2M;
		},
		//提交数据
		submitForm(){
			let testing = this.skillList.every(item => {
				return item.grade != undefined;
			});
			if(!this.form.rate || !this.money || !testing){
				this.$message({
					message: '请将数据填写完整',
					type:'warning'
				})
				return false;
			}
			console.log(this.skillList);
			if(this.money == 1){
				this.form.referPayLow = '0';
				this.form.referPayHign = '1000';
			}else{
				let money = this.moneyList[this.money-1].label.split('-');
				this.form.referPayLow = money[0];
				this.form.referPayHign = money[1];
			}
			this.skillList.forEach(item => {
				delete item['items'];
				this.form.skillList.push(item);
			})
			console.log(this.form);
			
			this.$emit('subEval',this.form);
			this.reset();
		},
		reset(){
			this.form = {
				radio: 1,
				skillList:[],
				rate:0,
				certificatePhotos:[],
				workPhotos:[],
				referPayLow:'',					//薪资下限
				referPayHign:''					//薪资上线
			};
			this.skillList = [];
			this.showOne = true;
			this.dialogImageUrl = '';
			this.dialogVisible = false;
			this.certificatePhotos = [];
			this.workPhotos = [];
		}
	}
}
</script>
<style scoped="scoped">
.evalDialog{
	min-height: 700px;
}
.evalDialog .title{
	height: 60px;
	line-height: 60px;
	font-size: 15px;
	font-weight: bold;
	border-bottom: 1px solid #D2D2D2;
	padding: 0 0 0 30px;
}
.evalDialog .title span{
	width: 10px;height: 20px;
	float: left;background: #0064E4;
	margin: 20px 15px 0 0;
}
.eval{
	margin: 20px 30px;
}
.msg-name{
	height: 24px;line-height: 24px;
	color: #000;
}
.msg-name span{
	display: inline-block;
	color: #a2a2a2;
}
.stepone-radio{
	margin: 20px 0;
	width: 520px;
}
.sure,.skill-switch{
	overflow: hidden;
	padding-bottom: 30px;
}
.sure-btn{
	float: right;margin-right: 20px;
}
.steptwo{
	margin-top: 20px;
}
.skill-test{
	color: #000;font-size: 12px;
	margin-bottom: 20px;font-weight: bold;
}
.switch-item,.skill-rate{
	margin: 0 0 30px 20px;
}
.skill-title{
	margin-right: 20px;
	float: left;width: 150px;
}
.skill-submit{
	text-align: center;
	padding: 0 0 30px 0;
}
</style>
